BSST Team | ZWU
2024.6
About
Team Interoduction
Team Member
Course
Final
Course→Web Build
1.Create a Repository
When creating a warehouse, it is important to choose Public or Private. Public warehouses are visible to everyone, while private warehouses are only visible to individuals.
If necessary, you can add an explanation file for the warehouse (Add a README file)
2.Member invitation
When inviting members, they should be given corresponding identities (Admin and Maintain). Administrators have the right to retain and delete warehouses, while members (Maintain) do not have the right to delete warehouses
Note: The pages for administrators and members are different
3.Token Setting
Note: When selecting Expiration, select No Expiration
4.PicGo Setting
5.File cloning
Note: Duplicate cloning of files requires changing the file name or deleting files with the same name, otherwise cloning will fail.
6.File upload
To upload using GitHub software, it is necessary to determine the local folder of the repository. After each local change, be sure to click on commit to main for confirmation, and finally find push in the repository to upload.
Module 1: Basic tools such as movement and dragging
Module 2: Content of webpage elements
Module 3: Parameter Adjustment
Module 4: Creating a preview of a webpage
Module 1: Download the AutoHTML plugin
Module 2: Download the zip file

Module 1: Here are some web page files, .html are the code for the web page, and the two CSS files are the beautification code for the web page.
Module 2: Here's the code for a specific file. When opened, it will be displayed here. If you want to change the code, you can do so here.
Module 3: Here's the code for a specific file. When opened, it will be displayed here. If you want to change the code, you can do so here.

7.Web page code construction
Web Build (figma)
Module 1: Select the frame, and when you click the frame button, the commonly used frame sizes in daily life will be displayed on the right. Because we need to create a webpage, we choose a desktop sized frame.
Module 2: Here are some commonly used frames, you can choose your own frame according to your needs.
Module 1: Clicking on the created shape will bring up four points, and dragging the mouse can change the rounded corners of the shape.
Module 2: Here are some alignment options. Select the object you want to align, and then click on the desired alignment method.
Module 3: This is the beautification of graphics, where you can change colors, add borders, and create artistic effects.
Summary: When all the buttons are ready, they can be integrated using a grouping method. The shortcut key is Ctrl+G, which makes editing easier.

Make button,link and picture (figma)
Figma file export
For website construction, our team uses Figma for website design and supplements it with traditional languages such as HTML and CSS
  <div class="example"> //Referencing CSS libraries
<a href=”xxxxxxxx.html”>example</a></div>
Web hyperlink creation